<template>
  <div v-if="isVisible" class="modal-overlay" @click.self="close">
    <div class="modal-content">
      <span class="close" @click="close">&times;</span>
      <div class="left">
        <button class="tuijian">登陆后推荐更懂你的笔记</button>
        <img
          src="../images/header-logo.png"
          alt="小红书图标"
          class="header-logo"
        />
        <div class="qrcode">
          <img src="../images/1.png" alt="" />
        </div>
        <!-- 下行提示 -->
        <div class="tip">
          可用
          <i class="iconfont icon-xiaohongshu" style="color: red"
            ><strong>小红书</strong></i
          >或 <i class="iconfont icon-weixin" style="color: green"></i
          ><strong>微信</strong>扫码
        </div>

        <div class="tip1">
          <i class="iconfont icon-sanjiaoxing" style="color: gray"></i
          >小红书如何扫码
        </div>
      </div>
        <div class="line-container">
          <hr>
        </div>

        <!-- 阻止表单的默认提交行为 -->
        <form @submit.prevent="handleLogin">
          <div><h2>手机号登录</h2></div>

          <div>
            <input
              type="text"
              id="username"
              v-model="username"
              class="shoujihao"
              required
              placeholder="86+ 输入手机号"
              @focus="removePlaceholder"
              @blur="addPlaceholder"
            />
          </div>
          <div class="sure">
            <input
              type="text"
              id="code"
              class="code"
              v-model="code"
              required
              placeholder="输入验证码"
              @focus="removePlaceholder"
              @blur="addPlaceholder"
            />
            <button type="button" @click="getCode" class="getsure">
              获取验证码
            </button>
          </div>
          <button type="submit" class="loginpage">登录</button>

          <div class="link-container">
            <input type="checkbox" />我已阅读并同意
            <a href="#">《用户协议》</a>
            <a href="#">《隐私政策》</a>
            <a href="#">《儿童/青少年个人信息保护规则》</a>
          </div>
          <div>
            <span class="tishi">新用户可直接登录</span>
          </div>
        </form>
        <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
      
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      username: "",
      code: "",
      errorMessage: "",
      verificationCode: "", // 存储生成的验证码
      codeSent: false, // 标记验证码是否已发送
    };
  },
  methods: {
    close() {
      this.$emit("close");
      this.resetForm();
    },
    getCode() {
      if (/^\d{11}$/.test(this.username)) {
        this.verificationCode = Math.floor(
          100000 + Math.random() * 900000
        ).toString(); // 生成6位验证码
        console.log(
          "验证码已发送到",
          this.username,
          "验证码为:",
          this.verificationCode
        );
        this.codeSent = true; // 设置验证码已发送标志
      } else {
        alert("请输入有效的手机号");
      }
    },
    removePlaceholder() {
      this.placeholderVisible = false;
    },
    addPlaceholder() {
      if (!this.username && this.code) {
        this.placeholderVisible = true;
      }
    },
    handleLogin() {
      if (this.code === this.verificationCode) {
        alert("登录成功！");
        this.close();
      } else {
        this.errorMessage = "验证码错误或未发送";
      }
    },
    resetForm() {
      this.username = "";
      this.code = "";
      this.errorMessage = "";
      this.verificationCode = ""; // 重置验证码
      this.codeSent = false; // 重置验证码发送状态
    },
  },
};
</script>

<style scoped>
.left{
  width: 400px;
  height: 240px;

}
.line-container{
  display: flex;
  align-items: center;
}
hr{
  height: 480px;
  margin-left: 400px;
  margin-top: -240px;
}

.tip1 {
  margin-left: 75px;
  margin-bottom: -60px;
  line-height: 60px;
  color: gray;
}
.tip {
  margin-left: 70px;
  margin-top: 10px;
}

/* 二维码 */
.qrcode {
  width: 200px;
  height: 200px;
  background-color: white;
  margin-top: 20px;
  margin-left: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid rgba(244, 239, 239, 0.87);
  box-shadow: rgba(132, 129, 129, 0.87);
}

/* 底部链接样式 */
.link-container {
  width: 260px;
  gap: 10px; /* 超链接之间的间距 */
  margin-top: 20px;
}
.link-container a {
  text-decoration: none;
  color: rgb(17, 119, 192);
}
.link-container a:hover {
  cursor: pointer;
  background-color: white;
}
.tishi {
  color: rgb(179, 171, 171);
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 登录弹窗左部样式 */
form {
  margin-left: 450px;
  width: 120px;
  margin-top: -100px;
  position: fixed;
  margin-top: 10px;
}

.tuijian {
  color: rgb(21, 112, 216);
  background-color: rgb(180, 214, 244);
  border-radius: 999px;
  width: 250px;
  height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-left: 40px;
  box-shadow: 0 0 0 1px rgb(180, 214, 244);
  position: fixed;
  border: 0;
}
.header-logo {
  /* margin-top: -60px; */
  margin-left: 120px;
  margin-top: 80px;
}
/* 验证码放入输入框内 */
.sure {
  position: relative;
  width: 260px;
}
.sure input {
  width: 100%;
  padding-right: 100px;
}
.getsure {
  position: absolute;
  right: 20px;
  top: 70%;
  transform: translateY(-50%);
  border: none;
  background-color: #eee;
  color: red;
  cursor: pointer;
  height: 30px;
  font-size: 16px;
}

/* 弹窗样式 */
.modal-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: rgb(248, 249, 249);
  padding: 20px;
  border-radius: 8px;
  width: 800px;
  height: 480px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 12;
}
/* 关闭样式 */
.close {
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.error {
  color: red;
}

/* 登录按钮样式 */
.loginpage {
  border-radius: 999px;
  width: 280px;
  height: 40px;
  border: 1px solid rgba(132, 128, 128, 0.5);
  margin-top: 60px;
  background-color: red;
  color: white;
}

/* input样式 */
.code {
  width: 280px;
  

  margin-top: 30px;
  border-radius: 999px;
  border: 1px solid rgb(153, 151, 151);
  background-color:#eee;
  font-size: 16px;
  width: 475.2px;
  height: 48px;
  line-height: 22px;
}
.shoujihao {
  width: 260px;

  margin-top: 30px;
  border-radius: 999px;
  border: 1px solid rgb(153, 151, 151);
  background-color:#eee;
  font-size: 16px;
  height: 48px;
  line-height: 22px;
}
h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  height: 24px;
  margin-top: 50px;
  margin-right: -100px;
}
</style>
